<template>
	<view class="farm-skin">
		<view
			class="skin-top"
			v-if="farmSkinShow">
			<image
				@click="changeShow"
				src="/static/images/chicken/skin_arrow.png" 
				mode="widthFix"></image>
		</view>
		<u-popup
			v-model="farmSkinShow"
			mode="bottom"
			:mask="false"
			:mask-close-able="false"
			class="chicken-edit">
			<view class="box">
				<scroll-view
					scroll-y
					@scrolltolower="scrolltolower"
					class="center">
					<view class="scroll-box">
						<view
							v-for="(val, index) in skinList"
							:key="index"
							class="item"
							@click="skinChoose(val)">
							<view class="title">{{ val.name }}</view>
							<view class="item-center">
								<img class="img" :src="val.img" />
							</view>
							<view class="btn">点击更换</view>
						</view>
					</view>
				</scroll-view>
				
				<image
					class="bg"
					src="/static/images/chicken/bg_skin.png"
					mode="widthFix"></image>
				<image
					class="close"
					@click="changeShow"
					src="/static/images/chicken/close.png"
					mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'myMessage',
		props: {
			farmSkinShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				skinList: [
					{
						name: '春季皮肤',
						img: '/static/images/chicken/chicken_1.png',
					},
					{
						name: '夏季皮肤',
						img: '/static/images/chicken/chicken_1.png',
					},
					{
						name: '秋季皮肤',
						img: '/static/images/chicken/chicken_1.png',
					},
					{
						name: '冬季皮肤',
						img: '/static/images/chicken/chicken_1.png',
					},
				]
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'farmSkinShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			skinChoose(val) {
				this.changeShow();
				this.$emit('skinChoose', val);
			},
		}
	}
</script>

<style lang="scss" scoped>
.farm-skin {
	.skin-top {
		position: absolute;
		left: 26rpx;
		top: 30rpx;
		z-index: 10075;
		image {
			width: 64rpx;
		}
	}
}
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 840rpx;
		background-color: transparent;
		.center {
			position: absolute;
			left: 0;
			top: 284rpx;
			z-index: 1;
			width: calc(100% - 116rpx);
			height: calc(100% - 284rpx);
			padding: 0 58rpx;
			text-align: center;
			.scroll-box {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.item {
					width: 305rpx;
					padding: 10rpx 22rpx;
					margin-bottom: 20rpx;
					background-color: #fff3dd;
					border: 2rpx solid #e49b62;
					border-radius: 20rpx;
					box-shadow: -6rpx 0rpx 0rpx 6rpx #d6af7a, 
						0rpx 7rpx 0rpx 7rpx rgba(255, 255, 255, .84) inset;
					
					.title {
						margin: 20rpx 0;
						color: #732011;
						text-shadow: -2rpx 0rpx 1rpx 2rpx rgba(255,247,237,0.67); 
					}
					.item-center {
						width: 259rpx;
						height: 259rpx;
						background: #f6dcaa;
						border-radius: 10rpx;
						.img {
							width: 100%;
							height: 100%;
						}
					}
					.btn {
						width: 259rpx;
						height: 62rpx;
						margin: 18rpx 0;
						background: linear-gradient(180deg,#fe736e 0%, #f03d4d 100%);
						border: 2rpx solid rgba(228,55,72,0.80);
						border-radius: 31rpx;
						box-shadow: -6rpx 0rpx 3rpx 6rpx #ffe9dd,
							-4rpx 0rpx 3rpx 4rpx rgba(255,255,255,.56) inset, 
							0rpx 0rpx 1rpx NaNrpx #d8414b inset;
						font-size: 32rpx;
						font-weight: bold;
						color: #fff;
						line-height: 55rpx;
					}
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 10rpx;
			top: 168rpx;
			width: 46rpx;
		}
	}
}
</style>